<template>
  <el-main>
    <div style="margin-top: 20px; margin-bottom: 30px">
      <!-- 查询框 -->
      <el-form
          :model="select"
          ref="select"
          label-width="100px"
          inline
        >
          <el-form-item label="id" label-width="20px" prop="linkId"
   
   >
            <el-input  v-model.number="select.linkId" style="width: 80px;" placeholder="可选"  ></el-input>
          </el-form-item>
          <el-form-item label="标题" label-width="60px" >
            <el-input v-model="select.linkTitle" style="width: 150px;" placeholder="可选,模糊查询"></el-input>
          </el-form-item>
          <el-form-item label="url" label-width="50px">
            <el-input v-model="select.url" style="width: 150px;" placeholder="可选,模糊查询"></el-input>
          </el-form-item>
          
          <el-form-item label="最近访问时间" label-width="110px">
            <el-form-item >
              <el-date-picker
                type="datetime"
                placeholder="选择日期"
                value-format="timestamp"
                v-model="select.dateLastAccessed"
                style="width: 200px"
              ></el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item label="链接类型" style="width: 280px">
            <el-select
              v-model="select.category"
              placeholder="请选择链接类型"
              style="width: 180px"
            >
              <el-option label="文本超链接" value="文本超链接"></el-option>
              <el-option label="图像超链接" value="图像超链接"></el-option>
              <el-option label="E-mail链接" value="E-mail链接"></el-option>
              <el-option label="锚点链接" value="锚点链接"></el-option>
              <el-option
                label="多媒体文件链接"
                value="多媒体文件链接"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="">
            <el-button type="primary" @click="selectNow()">立即查询</el-button>
            <el-button @click="resetSelect()">重置</el-button>
          </el-form-item>
        </el-form>
      <!-- 数据表格 -->
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        stripe
        height="490px"
        style="width: 100%"
      >
        <el-table-column label="#" type="index" align="center">
        </el-table-column>
        <el-table-column prop="linkId" label="id" align="center" width="180"  sortable>
        </el-table-column>
        <el-table-column
          prop="linkTitle"
          label="标题"
          align="center"
          show-overflow-tooltip
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="url"
          align="center"
          show-overflow-tooltip
          label="链接地址"
        >
        </el-table-column>
        <el-table-column align="center" label="发布时间"  sortable>
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              formatDate(scope.row.publicationDate)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最近访问时间"  sortable>
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              formatDate(scope.row.dateLastAccessed)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="category" align="center" label="链接类型">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="
                deleteFun();
                getDate(scope.row);
              "
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="
                getDate(scope.row);
                updateFun();
              "
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-sizes="[20, 50, 100, 200]"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </el-main>
</template>

<script>
import axios from "axios";
export default {
  methods: {
    deleteFun: function () {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .post("http://localhost:8080/link/removeLink", this.delete)
            .then((res) => {
              if (res.data == "0") {
                this.$message({
                  type: "error",
                  message: "删除失败",
                });
              } else {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                  onClose: () => location.reload(),
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateFun: function () {
      sessionStorage.setItem("params", JSON.stringify(this.update));
      let params = JSON.parse(sessionStorage.getItem("params"));
      console.log(params);
      this.$router.push({
        path: "/update",
      });
    },
    formatDate: function (date1) {
      var d = new Date(date1);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    getDate: function (e) {
      this.delete.linkId = e.linkId;
      this.update.linkId = e.linkId;
      this.update.linkTitle = e.linkTitle;
      this.update.url = e.url;
      this.update.publicationDate = e.publicationDate;
      this.update.dateLastAccessed = e.dateLastAccessed;
      this.update.category = e.category;
    },
    checkFun:function(){
      
      if(typeof(this.select.linkId)=== typeof(1) || this.select.linkId==""){
        return true;
      }else{
        return false;
      }
    },
    selectNow:function(){
      if(this.checkFun()){
        axios
            .post("http://localhost:8080/link/getAny", this.select)
            .then((res) => {
              console.log(res);
              if (!res) {
                this.$message({
                  type: "error",
                  message: "查询失败",
                });
              } else {
                this.$message({
                  type: "success",
                  message: "查询成功!",
                });
                this.tableData = res.data;
              }
            });

      axios.post("http://localhost:8080/link/count",this.select).then((res) => {
      this.total = res.data;
    });
      }else{
        this.$message({
                  type: "error",
                  message: "id仅允许为 数字类型",
                });
      }
      
    },
    handleSizeChange(val) {
        this.pageSize = val;
      },
    resetSelect:function(){
      this.select.linkId = "";
      this.select.linkTitle = "";
      this.select.url = "";
      this.select.publicationDate = "";
      this.select.dateLastAccessed = "";
      this.select.category = "";
      location.reload();
    }
  },
  data() {
    return {
      dialogUpdateVisible: false,
      tableData: [],
      currentPage: 1,
      total: 20,
      pageSize: 20,
      update: {
        linkId: "",
        linkTitle: "",
        url: "",
        publicationDate: "",
        dateLastAccessed: "",
        category: "",
      },
      delete: {
        linkId: "",
        linkTitle: "",
        url: "",
        publicationDate: "",
        dateLastAccessed: "",
        category: "",
      },
      select: {
        linkId: "",
        linkTitle: "",
        url: "",
        publicationDate: "",
        dateLastAccessed: "",
        category: "",
      }
    };
  },
  mounted() {
    axios.get("http://localhost:8080/link/getAll").then((res) => {
      this.tableData = res.data;
    });
    axios.get("http://localhost:8080/link/count").then((res) => {
      this.total = res.data;
    });
  },
};
</script>

<style>
.el-main {
  text-align: center;
  /* line-height: 50px; */
}

body > .el-container {
  margin-bottom: 40px;
}
#app > section > main > div > div > div.el-table__header-wrapper > table {
  height: 10px;
}
</style>